import {createAppContainer, createSwitchNavigator} from 'react-navigation'

import {createStackNavigator} from 'react-navigation-stack'

import {createBottomTabNavigator} from 'react-navigation-tabs'

import Login from '../Pages/Login'
import WelcomePage from '../Pages/WelcomePage'
import HomePage from '../Pages/HomePage'
import DetailPage from '../Pages/DetailPage'

import MyPage from '../Pages/MyPage'

import {connect} from 'react-redux'

import {createReactNavigationReduxMiddleware, createReduxContainer} from 'react-navigation-redux-helpers'


//广告页
const Init = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage
    }
})

//登录页
const LoginN = createStackNavigator({
    Login: {
        screen: Login
    }
})



//底部导航 包含多个页面
const BottomTabs = createBottomTabNavigator({
    HomePage: {
        screen: HomePage,
        navigationOptions: {
            tabBarLabel: '新闻'
        }
    },
    MyPage: {
        screen: MyPage,
        navigationOptions: {
            tabBarLabel: '我的'
        }
    }
})


//主页面
const Main = createStackNavigator({
    BottomTabs: {
        screen: BottomTabs
    },
    DetailPage: {
        screen: DetailPage
    },
})


const AppNavigator = createSwitchNavigator({
    Init: Init,
    Main: Main,
    Login: LoginN
})


export const rootCom = "Init"; //设置根路路由

export const RootNavigator = createAppContainer(AppNavigator)

const AppWithNavigationState = createReduxContainer(RootNavigator, "root")

export const middleware = createReactNavigationReduxMiddleware( state => state.nav, "root")

//State到Props的映射关系
const mapStateToProps = state => {
    return {
        state: state.nav
    }
}

export default connect(mapStateToProps)(AppWithNavigationState);